<!--
 * @Description: 
 * @Author: wangyan
 * @Date: 2021-02-24 16:35:19
 * @LastEditTime: 2021-03-06 10:38:44
 * @LastEditors: Please set LastEditors
-->
<!--  -->
<template>
  <el-table
    v-loading="loading"
    :data="tableData"
    border
    style="width: 100%"
    :height="height"
    row-key="id"
    @row-click="rowClick"
  >
    <el-table-column
      v-for="(column, index) in columnData"
      :key="index"
      :prop="column.prop"
      :label="$t(column.title)"
      :align="columAttributes.align"
      :sortable="column?.sortable"
    >
      <template #default="scope">
        <template v-if="!column.render">
          <template v-if="column.formatter">
            <span
              v-html="column.formatter(scope.row, column, scope.$index)"
              @click="column.click && column.click(scope.row, scope.$index)"
            ></span>
          </template>

          <template v-else>
            <span
              :style="column.click ? 'color: #409EFF; cursor: pointer;' : null"
              @click="column.click && column.click(scope.row, scope.$index)"
            >
              {{ scope.row[column.prop] || column.content }}
              {{ `${scope.row[column.prop] && column.unit ? column.unit : ''}` }}
            </span>
            <span v-if="scope.row['modifyTime'] == null">
              {{ column.prop == 'modifyTime' ? scope.row['createTime'] : '' }}
            </span>
            <span v-if="scope.row['modifyBy'] == null">
              {{ column.prop == 'modifyBy' ? scope.row['createByName'] : '' }}
            </span>
          </template>
        </template>
        <template v-else>
          <render :column="column" :row="scope.row" :render="column.render" :index="index"></render>
        </template>
      </template>
    </el-table-column>

    <el-table-column
      v-for="(item, index) in othercolumnData"
      :key="index"
      :prop="item.prop"
      :label="item.title"
      :align="columAttributes.align"
    >
      <template #default="scope">
        <el-button
          v-for="(i, index) in item.list"
          :key="index"
          type="text"
          size="small"
          v-limit="i.limit"
          @click="i.fn(scope.$index, scope.row)"
          >{{ i.title }}</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-if="havePage"
    :total="pageOption.total"
    :current-page="pageOption.current"
    @current-change="currentChange"
    layout="total, prev, pager, next, jumper"
    align="right"
  ></el-pagination>
</template>

<script>
export default {
  name: 'Tables',
  props: {
    loading:{
      type:Boolean
    },
    rowClick: {
      type: Function,
    },
    height: {
      type: Number,
      default: 700,
    },
    tableData: {
      type: Array,
      default: () => {
        ;[]
      },
    }, //表格数据
    columnData: Array, //表头数据
    columAttributes: {
      type: Object,
      default: () => {
        return {
          align: 'center',
        }
      },
    },
    othercolumnData: Array, //额外表头数据
    havePage: {
      type: Boolean,
      default: true,
    },
    pageOption: {
      default: function () {
        return {
          total: 0,
          current: 1,
        }
      },
    }, //分页配置
  },
  data() {
    return {}
  },
  methods: {
    currentChange(val) {
      this.pageOption.pageChange(val)
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  // created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  // mounted() {},
}
</script>
<style scoped lang="scss">
/* @import url(); 引入scss类 */
</style>
